<template>
  <view class="container">
    <view class="title-bg">
      <p>Outing Fun</p>
      <view class="mask-box" />
      <view class="content">
        <image
          class="img"
          :src="require('@/static/public/orderFail.png')"
          mode="aspectFill"
        />
        订单支付失败，请重新支付
        <view class="sawbg" />
      </view>
    </view>
    <view class="btn-box">
      <button
        class="color-555 detail"
        @click="goBack"
      >
        退出
      </button>
      <button
        class="color-fff look"
        :loading="btnLoading"
        :disabled="btnLoading"
        @click="rePay"
      >
        返回
      </button>
    </view>
  </view>
</template>

<script>
	import {
		onLinePay
	} from '@/common/js/ddPay.js';

	export default {
		data() {
			return {
				options: {},
				btnLoading: false
			};
		},
		onLoad(options) {
			this.options = options;
		},
		methods: {
			rePay() {
        uni.navigateBack();
				// if (this.options.orderNo) {
				// 	this.btnLoading = true;
				// 	onLinePay(this.options.orderNo).finally(e => {
				// 		this.btnLoading = false;
				// 	});
				// }
			},
			goBack() {
				uni.reLaunch({
					url: '/pages/index/index'
				});
			}
		}
	};
</script>

<style lang="less" scoped>
	.container {
		background: #f7f9fb;
		min-height: 100vh;

		.title-bg {
			width: 100%;
			height: 240rpx;
			padding: 0 30rpx;
			position: relative;
			background: linear-gradient(180deg, #ffe19c 0%, #ffc254 100%);

			p {
				position: absolute;
				left: 30rpx;
				bottom: 62rpx;
				font-size: 38rpx;
				font-family: ShinGoPr6-Bold, ShinGoPr6;
				font-weight: bold;
				color: #ffe7bc;
				text-shadow: 0px 1rpx 1rpx #ffb52e;
			}

			.mask-box {
				position: absolute;
				left: 30rpx;
				bottom: 20rpx;
				width: 690rpx;
				height: 26rpx;
				border-radius: 13rpx;
				border: 3rpx solid;
				background: #f6a817;
				border-image: linear-gradient(180deg,
						rgba(250, 180, 47, 1),
						rgba(255, 205, 110, 1)) 3 3;
			}

			.content {
				position: absolute;
				text-align: center;
				color: #555555;
				font-size: 32rpx;
				font-weight: bold;
				top: 194rpx;
				left: 50rpx;
				width: 650rpx;
				height: 498rpx;
				background: linear-gradient(180deg,
						#f4d5a6 0%,
						#ffffff 5%,
						#ffffff 18%,
						#ffffff 100%);
				box-shadow: 0px 4rpx 12rpx 2rpx rgba(0, 0, 0, 0.08);

				.img {
					display: block;
					margin: 124rpx auto 64rpx;
					width: 231rpx;
					height: 175rpx;
				}
			}

			.sawbg {
				position: absolute;
				left: 0;
				bottom: -15rpx;
				width: 100%;
				height: 15rpx;
				background: #ffffff;
				background-image: -webkit-gradient(linear,
						50% 0,
						0 100%,
						from(transparent),
						color-stop(0.5, transparent),
						color-stop(0.5, #f7f9fb),
						to(#f7f9fb)),
					-webkit-gradient(linear, 50% 0, 100% 100%, from(transparent), color-stop(0.5, transparent), color-stop(0.5, #f7f9fb), to(#f7f9fb));
				background-size: 30rpx 15rpx;
				background-repeat: repeat-x;
				background-position: 0 100%;
			}
		}

		.btn-box {
			display: flex;
			justify-content: space-between;
			position: absolute;
			top: 747rpx;
			left: 50rpx;
			width: 650rpx;

			button {
				width: 305rpx;
				height: 82rpx;
				line-height: 82rpx;
				font-size: 28rpx;
				background: #ffffff;
				border-radius: 41rpx;
			}

			.look {
				background: linear-gradient(135deg, #f78833 0%, #ffc77b 100%);
			}
		}
	}
</style>
